<template>
    <div class="wrap">
        <div id="container">
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">{{title}}</h5>
                </div>
            </section>
            <div class="block buttonDiv">
              <el-tabs @tab-click="handleClick">
                <el-tab-pane label="全部消息"></el-tab-pane>
                <el-tab-pane :label="item" v-for="item in buttonData" :key="item"></el-tab-pane>
              </el-tabs>
            </div>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column  label="标题内容" >
                       <template scope="scope">
                          <router-link  :to="'/msg/details/'+scope.row.msgId+''"><span :class="'msgTitle'+scope.row.isRead+''">{{scope.row.msg.title}}</span></router-link>
                       </template>
                    </el-table-column>
                    <el-table-column prop="msg.createTimeStr" label="提交时间" > </el-table-column>
                    <el-table-column prop="msg.realType" label="类型" > </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullRight">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <div class="pullLeft">
                        <el-button size="small" name="button-del" @click="delAll()" :disabled="disabled">删除</el-button>
                        <el-button :hidden="buttonShow" size="small" name="button-del" @click="readBatch()" :disabled="disabled">标记已读</el-button>
                        <el-button :hidden="buttonShow" size="small" name="button-del" @click="readAll()" :disabled="allDisabled">全部已读</el-button>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
import { getTypeList, getMsgList, readBatch, deleteBatchMsg, readAll, getNoReadMsgList } from '@/api/msgCenterData'
export default {
  data() {
    return {
      dataArr: null,
      currPage: 1,
      pageSize: 10,
      totalSize: 0,
      disabled: true,
      allDisabled: true,
      isRead: null,
      multipleSelection: [],
      buttonData: [],
      buttonShow: false,
      title: '全部消息',
      selectType: null
    }
  },
  created() {
    var path = this.$route.path
    var tag = path.substr(path.lastIndexOf('/') + 1)
    if (tag === 'no') {
      this.isRead = false
      this.title = '未读消息'
    } else if (tag === 're') {
      this.isRead = true
      this.buttonShow = true
      this.title = '已读消息'
    }
    this.getTypeList()
    this.getMsgList(1)
  },
  methods: {
    getNoReadMsgList() {
      var listQuery = { }
      getNoReadMsgList(listQuery).then(response => {
        this.$store.commit('changeMsg', {
          msgTotal: response.data.totals,
          msgData: response.data.data
        })
        if (this.$store.state.msg.msgTotal > 0) {
          this.allDisabled = false
        } else {
          this.allDisabled = true
        }
      })
    },
    getTypeList() {
      var listQuery = { }
      getTypeList(listQuery).then(response => {
        this.buttonData = response.data
      })
    },
    getMsgList(currPage, pageSize, msgType) {
      if (pageSize === undefined) {
        pageSize = 10
      }
      var listQuery = { currPage: currPage, pageSize: pageSize, msgType: msgType, isRead: this.isRead }
      getMsgList(listQuery).then(response => {
        this.dataArr = response.data.data
        this.totalSize = response.data.totalRows
        this.currPage = currPage
        this.pageSize = pageSize
        if (this.$store.state.msg.msgTotal > 0) {
          this.allDisabled = false
        } else {
          this.allDisabled = true
        }
      })
    },
    handleSizeChange(val) {
      this.getMsgList(1, val, this.selectType)
    },
    handleCurrentChange(val) {
      this.getMsgList(val, this.pageSize, this.selectType)
    },
    readBatch() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      this.$confirm('确定标记选中的数据为已读？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        readBatch(obj).then(response => {
          this.getMsgList(1)
          this.getNoReadMsgList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }).catch(() => {
      })
    },
    delAll() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        ids: idQuery.join(',')
      }
      this.$confirm('确定删除选中的数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatchMsg(obj).then(response => {
          this.getMsgList(1)
          this.getNoReadMsgList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
      })
    },
    readAll() {
      const obj = {}
      this.$confirm('确定标记全部已读？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        readAll(obj).then(response => {
          this.getMsgList(1)
          this.getNoReadMsgList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }).catch(() => {
      })
    },
    handleClick(tab, event) {
      if (tab.label !== '全部消息') {
        this.selectType = tab.label
      } else {
        this.selectType = null
      }
      this.getMsgList(1, this.pageSize, this.selectType)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.disabled = false
      } else {
        this.disabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
        }
    }
}
.tableMain{
    padding:0px 15px;
    th,td{
      border-right: 0px;
    };
	 。msgTitletrue{
	  color: #999; 
	};
	。msgTitlefalse{
	  color: #000; 
	}
}
.buttonDiv{
   padding:0px 15px;
   padding-top: 0px;
}

.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullRight{
        float: right;
    }
}

.msgTitletrue{
  color: #999;
}

</style>


